<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>
        Add or remove graphics from a FeatureLayer | Sample | ArcGIS API for
        JavaScript 4.18
    </title>

    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #add {
            margin-bottom: 5px;
        }

        #actions {
            padding: 5px;
        }

        button:disabled {
            opacity: 0.4;
            -moz-opacity: 0.4; /* Firefox and Mozilla browsers */
            -webkit-opacity: 0.4; /* Safari */
            cursor: default;
        }
    </style>

    <script>
        require([
            "esri/Map", "esri/views/MapView",
            "esri/Basemap", "esri/layers/VectorTileLayer",
            "esri/layers/FeatureLayer", "esri/Graphic", "esri/widgets/Legend"
        ], (
            Map, MapView, Basemap, VectorTileLayer, FeatureLayer, Graphic, Legend
        ) => {
            const map = new Map({
                basemap: new Basemap({
                    baseLayers: [
                        new VectorTileLayer({
                            portalItem: {id: "474f0cb226884dd68f707ab0f2f1aa10"}
                        })
                    ],
                    referenceLayers: [
                        new VectorTileLayer({
                            portalItem: {id: "1768e8369a214dfab4e2167d5c5f2454"}
                        })
                    ]
                })
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [-122.18, 37.49]
            });

            //创建空的 FeatureLayer
            let featureLayer = new FeatureLayer({
                title:"国家博物",//图层的标题，用于在诸如`Legend` 和 `LayerList` 小部件之类的地方标识它
                fields:[//图形字段及其对应的字段类型
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    },
                    {
                        name: "LATITUDE",//纬度
                        alias: "纬度",//别名
                        type: "double"
                    },
                    {
                        name: "LONGITUDE",//经度
                        alias: "经度",//别名
                        type: "double"
                    },
                    {
                        name: "TYPE",//类型
                        alias: "经度",//别名
                        type: "string"
                    },
                    {
                        name: "NAME",//名称
                        alias: "名称",//别名
                        type: "string"
                    },

                ],//图层中的字段数组,比如图形代表物体的名称,类型,地址等
                objectIdField:"ObjectID",//包含图层中每个要素的唯一值或标识符的 oidfield 的名称
                popupTemplate:{//弹出模板
                    title:"{NAME}"
                },
                geometryType:"point",//图层中要素的几何类型
                source:[],//用于创建 FeatureLayer 的 Graphic 对象的集合
                renderer: {//渲染图形
                    type: "simple",
                    symbol: {
                        type: "web-style", // autocasts as new WebStyleSymbol()
                        styleName: "Esri2DPointSymbolsStyle",
                        name: "landmark"
                    }
                },
            });

            map.add(featureLayer);

            //创建一个图例
            let legend = new Legend({});
            //添加图例到左下角
            view.ui.add(legend, "bottom-left");
            //添加按钮至右上角
            view.ui.add(document.getElementById("actions"), "top-right");

            const addBtn = document.getElementById("add");

            const removeBtn = document.getElementById("remove");

            addBtn.addEventListener("click", addFeatures);
            removeBtn.addEventListener("click", removeFeatures);

            //添加图形要素
            function addFeatures(){
                const data = [
                    {
                        LATITUDE: 32.6735,
                        LONGITUDE: -117.2425,
                        TYPE: "国家纪念碑",
                        NAME: "卡布里洛国家纪念碑"
                    },
                    {
                        LATITUDE: 35.2234,
                        LONGITUDE: -118.559,
                        TYPE: "国家纪念碑",
                        NAME: "塞萨尔·查韦斯国家纪念碑"
                    },
                    {
                        LATITUDE: 37.6251,
                        LONGITUDE: -119.085,
                        TYPE: "国家纪念碑",
                        NAME: "魔鬼柱国家纪念碑"
                    },
                    {
                        LATITUDE: 35.2915,
                        LONGITUDE: -115.0935,
                        TYPE: "国家纪念碑",
                        NAME: "城堡山国家纪念碑"
                    },
                    {
                        LATITUDE: 41.7588,
                        LONGITUDE: -121.5267,
                        TYPE: "国家纪念碑",
                        NAME: "熔岩床国家纪念碑"
                    },
                    {
                        LATITUDE: 37.897,
                        LONGITUDE: -122.5811,
                        TYPE: "国家纪念碑",
                        NAME: "缪尔森林国家纪念碑"
                    },
                    {
                        LATITUDE: 41.8868,
                        LONGITUDE: -121.3717,
                        TYPE: "国家纪念碑",
                        NAME: "来湖国家纪念碑"
                    }
                ];

                let graphics=[];

                for (let i = 0; i < data.length; i++) {
                    let graphic = new Graphic({
                        attributes: data[i],//与图形关联的字段和字段值的 ame-value 对
                        geometry:{//定义图形位置的几何图形
                            type: "point",  // autocasts as new Point()
                            longitude: data[i].LONGITUDE,
                            latitude: data[i].LATITUDE
                        }
                    });
                    graphics.push(graphic);
                }

                featureLayer.applyEdits({//对图形要素的增删改查
                    addFeatures:graphics //添加图形要素
                });
            }

            //去除图形要素
            function removeFeatures(){
                featureLayer.queryFeatures().then((result)=>{//查询图形要素
                    featureLayer.applyEdits({//对图形要素的增删改查
                        deleteFeatures:result.features //添加图形要素
                    });
                })
            }

        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="actions">
    <button class="esri-button" id="add">添加 7 个图形</button>
    <button class="esri-button" id="remove">删除 7 个图形</button>
</div>
</body>
</html>
